<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>01-注册事件</title>
    <link rel="stylesheet" href="../Bootstrap/css/bootstrap.min.css">
    <!-- 引入Vue -->
    <script type="text/javascript" src="../VueJs/vue.js"></script>
</head>
<body>
    <!-- 
        总结
            a. 在vue中，使用 v-on: 的方式注册事件，事件名通用之前的
            b. 事件对应的处理函数，写在 methods 对象中，与data同级
            c. 在设计数据时，会把事件函数直接挂载到vm实例上，不会再出现一个别的对象管理
            d. 在声明事件的函数时，建议写成es6对象的简写方式

     -->
    <!-- 准备好一个容器-->
    <div id="demo">
        <div class="container">
            <h3>本节主题-事件的注册</h3>

            <!-- 在vue中，注册事件使用 v-on: 注册事件 -->
            <span class="btn btn-primary" v-on:click="fn">普普通通的按钮</span>
        </div>
    </div>

    <script type="text/javascript">
        //阻止 vue 在启动时生成生产提示。
        Vue.config.productionTip = false

        // ！！ 不要随便在外面写一些函数给dom去处理
        // function fn() {
        //     alert(100)
        // }
        
        const vm = new Vue({
            el: '#demo',
            data: {
                msg: 'hello !',
                // fn1: function() {
                //     alert(101)
                // }
            },
            // 事件的函数或者公共的方法，都应该写在 methods 里面
            methods: {
                // 这里声明的所有函数会直接挂载到vm实例上，所以dom中可以直接使用
                // fn: function() {
                //     // this 指向vm实例
                //     console.log(this)
                //     alert(100)
                // }
                // 推荐使用对象的简写方式
                fn() {
                    // 如果使用箭头函数this指向window
                    console.log(this)
                    alert(100)
                }
            }
        })
    </script>
</body>
</html>